﻿<style>
    .modal-dialog {
        margin-top: 200px;
    }

    .header {
        background: none;
        line-height: 50px;
        font-size: large;
    }

        .header div {
            border-right: 1px solid #ccc;
            background: #ccc;
        }

            .header div:last-child {
                border-right: none;
            }

            .header div.active {
                background: white;
            }

    .body {
        padding: 30px 15px;
    }

    .footer {
        text-align: right;
        padding: 10px 30px;
    }
</style>

<div class="row header text-center">
    <div class="col-sm-6" ng-class="{active: firstStep}" ng-init="firstStep=true">
        第一步：设置网考服务器
    </div>
    <div class="col-sm-6" ng-class="{active: !firstStep}">
        第二步：设置考点信息
    </div>
</div>

<div class="body">
    <form class="form-horizontal" id="configForm" ng-show="firstForm" ng-init="firstForm=true">
        <div class="form-group">
            <label class="control-label col-sm-4 text-right" for="BatchCode">批次代码：</label>

            <div class="col-sm-6">
                <input class="form-control" type="text" id="BatchCode" name="BatchCode" ng-model="BatchCode" placeholder="请输入批次代码" ng-change="resetTest();" ng-disabled="loadingState" />
            </div>

            <label class="control-label" for="BatchCode" style="background: #ccc; padding: 5px; border-radius: 5px;" ng-show="false">
                <a href="javascript:void();" ng-disabled="loadingState" ng-click="connectTest()" ng-init="linkText='测试连接'" style="color: rgb(77, 76, 76);">
                    <i class="fa fa-check fa-lg text-success" ng-show="connSuccess" ng-init="connSuccess=false"></i>
                    {{linkText}}
                </a>
            </label>
        </div>

        <div class="form-group">
            <div class="col-sm-8 col-sm-offset-4">
                <h5>
                    <small>用于和中央服务器数据交互，由机考项目组提供。</small>
                </h5>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-4 text-right" for="ValidateCode">考点代码：</label>

            <div class="col-sm-6">
                <input class="form-control" id="ValidateCode" name="ValidateCode" ng-model="validateCode" placeholder="请输入考点代码" />
            </div>
        </div>
    </form>

    <form class="form-horizontal" id="setPwdForm" ng-hide="firstForm">
        <div class="form-group">
            <label class="control-label col-sm-4 text-right">网考组织方：</label>

            <div class="col-sm-8 text-left">
                <label class="control-label">{{app.appName}}</label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-4 text-right">考点代码：</label>

            <div class="col-sm-8 text-left">
                <label class="control-label">{{site.examSiteCode}}</label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-4 text-right">考点名称：</label>

            <div class="col-sm-8 text-left">
                <label class="control-label">{{site.examSiteName}}</label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-4 text-right" for="ExamSitePwd">设置密码：</label>

            <div class="col-sm-8">
                <input class="form-control width-fiexd-200" type="password" id="ExamSitePwd" name="Password" placeholder="请设置密码" maxlength="20" ng-disabled="loadingState" />
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-4 text-right" for="ExamSitePwd">确认密码：</label>

            <div class="col-sm-8">
                <input class="form-control width-fiexd-200" type="password" id="ExamSiteConfirmPwd" name="ConfirmPassword" ng-model="site.sitePwd" placeholder="请确认密码" maxlength="20" ng-disabled="loadingState" />
            </div>
        </div>
    </form>
</div>

<div class="row footer">
    <button id="btnSave" type="button" class="btn btn-turquoise" ng-click="save();" ng-disabled="loadingState" ng-init="submitText='下一步'">
        <i class="fa fa-save" ng-hide="loadingState"></i>
        <i class="fa fa-spinner fa-spin" ng-show="loadingState"></i>
        <span>{{submitText}}</span>
    </button>
    <button id="btnClose" type="button" class="btn btn-gray" ng-click="close();" ng-disabled="loadingState">
        <i class="fa fa-close"></i>
        <span>关闭</span>
    </button>
</div>

<script>
    $(function () {
        $('form#configForm').validate({
            rules: {
                BatchCode: { required: true, isURL: true },
                ValidateCode: { required: true }
            },
            messages: {
                BatchCode: { required: '请输入批次代码！' },
                ValidateCode: { required: '请输入网考服务验证码！' }
            }
        });

        $('form#setPwdForm').validate({
            rules: {
                Password: { required: true, minlength: 5, maxlength: 20 },
                ConfirmPassword: { required: true, minlength: 5, maxlength: 20, equalTo: "#ExamSitePwd" }
            },
            messages: {
                Password: { required: '请设置考点密码！', minlength: '设置最小5位字符密码！', maxlength: '设置最大20位字符密码！' },
                ConfirmPassword: { required: '请确认考点密码！', minlength: '确认最小5位字符密码！', maxlength: '确认最大20位字符密码！', equalTo: '两次密码输入不相同！' }
            }
        });
    });
</script>
